<template>
    <div>
     <div v-for="item in fileLists" :key="item.id">
       <el-collapse v-model="activeNames" @change="handleChange">
         <el-collapse-item style="font-weight: bold" :title="item.name" name="1">
           <div>
             <el-row :gutter="10">
               <el-col :span="4" v-for="ite in item.listList " :key="ite.id">
                 <el-card :body-style="{ padding: '0px' }">
                   <div style="padding: 14px;" class="file">
                     <div style="height: 80px">
                       <span style="font-weight: bold;color: white">{{ite.name}}</span>
                     </div>
                     <el-button style="margin-top: 20px" type="text" class="button"><a :href="ite.downloadUrl" :download="ite.name">点击下载</a></el-button>
                   </div>
                 </el-card>
               </el-col>
             </el-row>
           </div>
         </el-collapse-item>
       </el-collapse>
     </div>
    </div>
</template>

<script>
  import {fileList} from '../api/axiosRequest'
  export default {
    data() {
      return {
        activeNames: ['1'],
        datum:[
          {
            classify:"编程书籍",
            fileList:[
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""}
            ]
          },
          {
            classify:"微服务相关资料",
            fileList:[
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""}
            ]
          },
          {
            classify:"Linux系列资料",
            fileList:[
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""}
            ]
          },
          {
            classify:"Python系列资料",
            fileList:[
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""}
            ]
          },
          {
            classify:"前端系列资料",
            fileList:[
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""}
            ]
          },
          {
            classify:"面试资料",
            fileList:[
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""},
              {fileName:"", fileUrl:""}
            ]
          },
        ],
        fileLists:[],
      };
    },
    created() {
      this.findFileAll()
    },
    methods: {
      handleChange(val) {
        console.log(val);
      },
      findFileAll(){
        fileList("/fileList/findAll").then(res =>{
          this.fileLists = res.data.data;
          console.log(res)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .time {
    font-size: 13px;
    color: #999;
  }
.file{
  height: 110px;
  background: url("https://com-hqj-oss.oss-cn-beijing.aliyuncs.com/shijuan/filelist/book/bookimg.jpg");
}
  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
</style>
